import React, { useEffect, useState } from 'react'
import { getBannerList, deleteBanner } from '../../api/banner'

import { Table, Image, Button, Popconfirm, message } from 'antd'

export default function Index() {

    const [bannerList, setBannerList] = useState()

    const [messageApi, context] = message.useMessage()

    useEffect(() => {
        getBannerList().then(res => {
            // console.log(res.data);
            setBannerList(res.data)
        })
    }, [])

    const [current, setCurrent] = useState(1)

    const columns = [
        {
            title: '序号',
            render(t, r, i) {
                return <span>{(current - 1) * 5 + i + 1}</span>
            }
        },
        {
            title: '图片',
            dataIndex: 'img',
            render(t) {
                return <Image src={t} style={{ height: 60 }} fallback='https://img0.baidu.com/it/u=952602436,1206030845&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' />
            }
        }, {
            title: '提示信息',
            dataIndex: 'alt'
        }, {
            title: '操作',
            render(t, r) {
                return <>
                    <Popconfirm
                        title={<>
                            您确定要删除吗？
                        </>}
                        onConfirm={() => { confirm(r) }}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button style={{ backgroundColor: '#f66', color: '#fff' }}>删除</Button>
                    </Popconfirm>
                </>
            }
        }
    ]

    function confirm(r) {
        deleteBanner({
            bannerid: r.bannerid
        }).then(res => {
            if (res.code == '200') {
                messageApi.success(res.message)

                getBannerList().then(res => {
                    setBannerList(res.data)
                })
            }

        })
    }

    return (
        <div>
            <h2>轮播图列表</h2>
            {context}
            <Table
                rowKey={'bannerid'}
                dataSource={bannerList}
                pagination={{
                    current,
                    defaultPageSize: 5,
                    onChange(page) {
                        setCurrent(page)
                    }
                }}
                columns={columns} />

        </div>
    )
}
